<!--
此组件：基于vant组件的基础之上做的二次封装
注意：
1、把vant组件的属性，在当前组件中要做声明（希望可以设置的属性）；
2、当前组件也有一部分属性
-->
<template>
    <div v-show="show" :style="{backgroundColor:bgcolor}" class="top-box" teleport="body" @click="goTop">
        <van-icon :name="name" :size="size" :color="color"></van-icon>
    </div>
</template>

<script>
export default {
    props: {
        bgcolor: {
            type: String,
            default: "#ededed"
        },
        // 以下属性是 van-icon组件的属性。
        name: {
            type: String,
            default: "back-top"
        },
        size: {
            type: Number,
            default: 30
        },
        color: {
            type: String,
            default: "inherit"
        }
    },

    data() {
        return {
            show: false
        }
    },

    mounted() {
        window.onscroll = () => {
            if (document.documentElement.scrollTop != undefined) {
                if (document.documentElement.scrollTop > 0) {
                    this.show = true;
                    console.log("this.show", this.show);
                    return;
                }
            } else {
                if (document.body.scrollTop > 0) {
                    this.show = true;
                    return;
                }
            }
            this.show = false;
        }
    },
    methods: {
        goTop() {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
            // document.documentElement.scrollTop=0;
            // document.body.scrollTop=0;
        }
    }
}
</script>

<style scoped>
.top-box {
    border-radius: 50%;
    position: fixed;
    right: 10px;
    bottom: 60px;
}
</style>